<template>
  <q-input
    @click="show"
    :model-value="modelValue"
    :label="label"
    @clear="clear"
    :disable="disable"
  >
    <q-dialog v-model="visible">
      <q-card style="max-height: calc(100vh - 2rem); max-width: 90vw">
        <q-table
          class="no-border-radius full-height sticky-header-table"
          style="max-height: calc(100vh - 12rem); overflow: auto"
          :rows="deviceList"
          :columns="columns"
          row-key="id"
          :filter="keyword"
          virtual-scroll
          :rows-per-page-options="[0]"
          :virtual-scroll-sticky-size-start="48"
          hide-bottom
        >
          <template v-slot:top>
            <div class="text-h6 q-pr-sm">选择机器人</div>
            <q-select
              v-model="type"
              :options="options"
              label="设备类型"
              :readonly="defaultType !== undefined"
              behavior="menu"
              outlined
              dense
              map-options
              emit-value
            />
            <q-space />
            <transition-flip v-if="online" class="q-ml-sm">
              <q-btn
                v-if="currentMap"
                label="所有在线AMR"
                color="secondary"
                @click="currentMap = false"
              />
              <q-btn
                v-else
                label="当前地图AMR"
                color="primary"
                @click="currentMap = true"
              />
            </transition-flip>
            <q-input
              v-else
              class="q-pl-sm"
              outlined
              dense
              v-model="keyword"
              placeholder="关键字筛选"
              clearable
            />
          </template>
          <template v-slot:body="props">
            <q-tr :props="props" @click="select(props.row)">
              <q-td
                v-for="column in columns"
                v-bind:key="column.name"
                :props="props"
              >
                {{
                  column.name !== "type"
                    ? props.row[column.name]
                    : amrTypes[props.row.type] || props.row.type
                }}
              </q-td>
            </q-tr>
          </template>
        </q-table>
        <q-btn
          class="full-width"
          stretch
          v-if="allOptions"
          label="选择所有机器人"
          icon="auto_fix_normal"
          color="primary"
          @click="select({ id: 'all' })"
        />
      </q-card>
    </q-dialog>
  </q-input>
</template>

<script>
import { computed, inject, onMounted, ref } from "vue";
import { useAPIStore } from "stores/api/index.js";
import { api } from "boot/axios.js";
import TransitionFlip from "components/animations/Flip.vue";

const offlineColumns = [
  { label: "设备ID", name: "id", field: "id", align: "left" },
  { label: "类型", name: "type", field: "type", align: "left" },
  { label: "型号", name: "model", field: "model", align: "left" },
];

const onlineColumns = [
  { label: "设备ID", name: "device", field: "device", align: "left" },
  { label: "类型", name: "type", field: "type", align: "left" },
  { label: "型号", name: "model", field: "model", align: "left" },
];

export default {
  name: "AmrSelector",
  components: { TransitionFlip },
  props: {
    modelValue: String,
    label: { type: String, default: "选择机器人" },
    defaultType: String,
    allOptions: { type: Boolean, default: false },
    online: { type: Boolean, default: false },
    disable: { type: Boolean, default: false },
    mapId: String,
  },
  setup(props, context) {
    const visible = ref(false);

    const device = ref({});
    const deviceList = ref([]);
    const type = ref(
      props.defaultType === undefined ? null : props.defaultType
    );
    const currentMap = ref(false);
    const amrTypes = {};
    inject("amrTypes").forEach((item) => {
      amrTypes[item.value] = item.label;
    });

    function getDevices() {
      if (props.online) {
        api.get(useAPIStore().centerUrl + "center/status").then((rs) => {
          deviceList.value = rs.data;
          device.value = deviceList.value.filter(
            (item) => item.id === props.modelValue
          )[0];
        });
      } else {
        if (props.modelValue !== "") {
          api
            .get(useAPIStore().centerUrl + "configs/id/" + props.modelValue)
            .then((rs) => {
              device.value = rs.data;
            });
        }
        api.get(useAPIStore().centerUrl + "configs/all").then((rs) => {
          deviceList.value = rs.data;
        });
      }
    }

    onMounted(getDevices);

    return {
      options: inject("amrTypes"),
      amrTypes,
      columns: computed(() => (props.online ? onlineColumns : offlineColumns)),
      deviceList: computed(() => {
        let list = deviceList.value;
        if (type.value !== null)
          list = deviceList.value.filter((item) => item.type === type.value);
        if (currentMap.value)
          list = list.filter((item) => item.mapID === props.mapId);
        return list;
      }),
      device,
      visible,
      type,
      keyword: ref(""),
      currentMap,
      show() {
        visible.value = true;
        if (props.online) currentMap.value = true;
      },
      select(value) {
        device.value = value;
        context.emit(
          "update:modelValue",
          props.online ? device.value.device : device.value.id
        );
        context.emit("full", device.value);
        visible.value = false;
      },
      clear() {
        context.emit("update:modelValue", null);
      },
    };
  },
};
</script>
